<template>
  <div>
    <div>华西二院耳鼻喉头颈外科睡眠呼吸监测预约系统</div>
    <van-form>
      <van-field
        v-model="patient_registration_number"
        label="患儿登记号（8位数）"
        type="number"
        required
        maxlength="8"
        placeholder="请输入登记号"
      ></van-field>
      <van-field
        v-model="contact_phone"
        label="联系电话"
        type="number"
        required
        maxlength="11"
        placeholder="请输入手机号"
      ></van-field>
      <div class="button-container">
        <van-button type="primary" @click="goToBack">去预约</van-button>
        <van-button type="primary" @click="queryAppointmentDetails">查询预约详情</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>

export default {
  name: 'home',
  data () {
    return {
      patient_registration_number: '',
      contact_phone: ''
    }
  },
  methods: {
    goToBack () {
      if (!this.patient_registration_number || this.patient_registration_number.length !== 8 || isNaN(this.patient_registration_number)) {
        this.$toast.fail('患儿登记号必须为8位数字')
        return
      }
      if (!this.contact_phone || !this.validatePhoneNumber(this.contact_phone)) {
        this.$toast.fail('联系电话必须是有效的手机号')
        return
      }
      this.$router.push({
        name: 'mother',
        query: {
          patient_registration_number: this.patient_registration_number,
          contact_phone: this.contact_phone
        }
      })
    },
    queryAppointmentDetails () {
      if (!this.patient_registration_number || this.patient_registration_number.length !== 8 || isNaN(this.patient_registration_number)) {
        this.$toast.fail('患儿登记号必须为8位数字')
        return
      }
      if (!this.contact_phone || !this.validatePhoneNumber(this.contact_phone)) {
        this.$toast.fail('联系电话必须是有效的手机号')
        return
      }
      this.$router.push({
        name: 'mother_list',
        query: {
          patient_registration_number: this.patient_registration_number,
          contact_phone: this.contact_phone
        }
      })
    },
    validatePhoneNumber (phoneNumber) {
      // 中国大陆手机号正则表达式，可根据需要调整
      const phoneRegex = /^1[3-9]\d{9}$/
      return phoneRegex.test(phoneNumber)
    }
  }
}
</script>

<style lang="scss" scoped>
.button-container {
  display: flex;
  justify-content: space-between; /* 使得按钮之间有空隙，并分别位于容器两侧 */
  margin-top: 10px; /* 您可以根据需要调整按钮与上方内容的间距 */
}
</style>
